<template>
  <view class="container">
    <view class="title"> 筛选 </view>
    <scroll-view class="tab-box" :show-scrollbar="false" :scroll-x="true" :style="{width: width}">
      <view class="tab-item" v-for="item in 10" :key="item">
        <view class="tab-text"> 筛选 {{item}}</view>
        <view class="bot-line"> </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { computed } from 'vue';
  const { safeArea } = uni.getSystemInfoSync()
  const width = computed(() => (safeArea.width - 56) + 'px' )
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 24px;
    display: flex;
    margin-top: 14px;
    margin-bottom: 7px;
    .title {
      position: relative;
      width: 32px;
      height: 19px;
      font-weight: 500;
      font-size: 16px;
      color: #FF3B1E;
      line-height: 19px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      &::after {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -5px;
        display: block;
        content: '';
        width: 26px;
        height: 4px;
        background: linear-gradient( 360deg, #FF8508 0%, #FF4847 100%);
        border-radius: 33px;
      }
    }
  }
  .tab-box {
    white-space: nowrap;
    position: relative;
    height: 19px;
    line-height: 19px;
    box-sizing: border-box;
    .tab-item {
      display: inline-block;
      width: 56px;
      padding: 0px 5px;
      box-sizing: border-box;
      .tab-text {
        width: 56px;
        font-size: 14px;
        color: #555555;
        height: 16px;
        font-weight: 400;
      }
      // .bot-line {
      //   margin-top: 3px;
      //   width: 100%;
      //   height: 4px;
      //   background: linear-gradient( 360deg, #FF8508 0%, #FF4847 100%);
      //   border-radius: 33px;
      // }
    }
  }
</style>